<!DOCTYPE html>
                <html style="height: 100%;width:100%">
                    <head>
                        <meta charset="utf-8">
                    </head>
             <body style="height: 100%; width:100%">
                        <div id="chart-panel" style="height: 100%;width: 100%"></div>
                        <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.2.1/dist/echarts.min.js"></script>
                        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
                        
                        <script type="text/javascript">
                var dom = document.getElementById("chart-panel");
                var myChart = echarts.init(dom);
                var option;
                var app ={};
                let getData = [
    {name: "A+",value: 75.17},
    {name: "A",value: 48.35},
    {name: "B",value: 95.36},
    {name: "C",value: 58.35},
    {name: "D",value: 28.35}
];
let xAxisData = [],seriesData1 = [],sum = 0,maxData=[];
let newObj = [],newObj2 = [],newObjDat = [];

barTopColor = ["#2efdfb", "#308cff", "#23b467", "#6c52da", "#a05bee"];
barBottomColor = ["rgba(46,253,251,0.1)", "rgba(48, 140, 255, 0.1)", "rgba(35, 180, 103, 0.1)", "rgba(108, 82, 218, 0.1)", "rgba(160, 91, 238, 0.1)"];
getData.forEach((item,index) => {
      xAxisData.push(item.name);
      seriesData1.push(item.value);
      sum += item.value;
      
      newObjDat.push("")
      newObjDat[index] = seriesData1[index]
      newObj.push({
          name: item.name,
          value: item.value,
          trueVal: item.value,
          itemStyle: {
              normal: {
                  color: 'transparent',
                  borderColor: barTopColor[index],
                  borderType: "dashed",
                  borderWidth: 10
              }
          }
      })
      newObj2.push({
          name: item.name,
          value: item.value,
          trueVal: item.value,
          itemStyle: {
              normal: {
                  color: 'transparent',
                  borderColor: barTopColor[index],
                  borderWidth: 50
              }
          }
      })
});

let max = Math.max.apply(null, seriesData1);
seriesData1.forEach(item =>{
      maxData.push(Number(max)+10)
})
// console.log(max,maxData)

option = {
      backgroundColor: "#000",
      title: {
          text: '',
          top:20,
          left:'center',
          textStyle:{
              color:'#fff',
              fontSize:20
          }
      },
      grid: {
          top: "0%",
          left: "5%",
          right: "5%",
          bottom: "5%",
          containLabel: true, //包括文本，居中
      },
      xAxis: {
          data: xAxisData,
          axisTick: {
              show: false
          },
          axisLine: {
              show: false
          },
          axisLabel: {
              show: true,
              margin: 25,
              interval: 0,
              align: 'center',
              formatter: function(params, index) {
                  return '{b|' + params + '}';
              },
              textStyle: {
                  fontSize: 14,
                  color: '#ffffff',
                  rich: {
                      a: {
                          fontSize: 14,
                          color: '#ffffff'
                      },
                      b: {
                          height: 20,
                          fontSize: 14,
                          color: '#ffffff'
                      }
                  }
              }
          },
          interval: 0
      },
      yAxis: {
          splitLine: {
              show: false
          },
          axisTick: {
              show: false
          },
          axisLine: {
              show: false
          },
          axisLabel: {
              show: false
          }
      },
      series: [
          {
          name: '柱顶部',
          type: 'pictorialBar',
          symbolSize: ["40%", 10],
          symbolOffset: [-5, -5],
          z: 12,
          itemStyle: {
              normal: {
                  color: function(params) {
                      return barTopColor[params.dataIndex];
                  }
              }
          },
          label: {
              show: true,
              normal: {
                  show: true,
                  position: 'top',
                  color: '#fff',
                  formatter: '{c}%',
              },
              fontSize: 14
          },
          symbolPosition: 'end',
          data: seriesData1,
      },{
          name: '柱底部',
          type: 'pictorialBar',
          symbolSize: ["40%", 10],
          symbolOffset: [-3, 5],
          z: 12,
          itemStyle: {
              normal: {
                  color: function(params) {
                      return barTopColor[params.dataIndex];
                  }
              }
          },
          data: seriesData1
      },
      {
          name: '柱顶部',
          type: 'pictorialBar',
          symbolSize: ["55%", 10],
          symbolOffset: [-3, -2],
          z: 12,
          itemStyle: {
              normal: {
                  color: function(params) {
                      let clos = barBottomColor[params.dataIndex].split(",")
                      return `${clos[0]},${clos[1]},${clos[2]},0.35)`;
                  }
              }
          },
          label: {
              show: false,
          },
          symbolPosition: 'end',
          data: maxData,
      },{
          name: "",
          type: 'pictorialBar',
          symbolSize: [68, 25],
          symbolOffset: [-4, 20],
          z: 10,
          barMinHeight:1,
          data: [...newObj]
      }, {
          name: "",
          type: 'pictorialBar',
          symbolSize: [47, 16],
          symbolOffset: [-5, 26],
          z: 10,
          barMinHeight:1,
          data: [...newObj2]
      },{
          type: 'bar',
          itemStyle: {
              normal: {
                  color: function(params) {
                      return new echarts.graphic.LinearGradient(0, 0, 0, 1,[
                          {offset: 1,color: barTopColor[params.dataIndex]},
                          {offset: 0,color: barBottomColor[params.dataIndex]}
                      ]);
                  },
                  opacity: 0.8
              }
          },
          z: 18,
          // silent: true,
          barWidth: "35%",
          barGap: '0%',
          data: seriesData1
      },
      {
          name: '底色',
          type: 'bar',
          barWidth: "50%",
          z: 0,
          barGap: '-120%',
          // stack: '',
          symbolPosition: 'end',
          itemStyle: {
              normal: {
                  color: function(params) {
                      return new echarts.graphic.LinearGradient(0, 0, 0, 1,[
                          {offset: 1,color: barTopColor[params.dataIndex]},
                          {offset: 0,color: barBottomColor[params.dataIndex]}
                      ]);
                  },
                  opacity: 0.3
              },
          },
          data: maxData,
      }]
};

                if (option && typeof option === 'object') {
                    myChart.setOption(option);
                }
                 </script>
               </body>
            </html>
    